<script setup lang="ts">
import DetailCard from '@/components/DetailCard.vue'

// 示例数据，包含使用插槽的字段
const infoList = [
  { label: '申请人', value: '张三' },
  { label: '申请时间', value: '2024-01-15 10:30:00' },
  {
    label: '申请金额',
    value: '￥1,000.00',
    slot: 'amountSlot',
  },
  {
    label: '审批状态',
    value: 'pending',
    slot: 'statusSlot',
  },
  {
    label: '备注',
    value: '这是一个很长的备注信息，需要多行显示。这是一个很长的备注信息，需要多行显示。',
    forceMultiline: true,
    slot: 'remarkSlot',
  },
  { label: '最后更新', value: '2024-01-15 14:20:00' },
]

// 自定义格式化函数
function formatAmount(value: string) {
  // 移除￥符号，保留数字
  return `${value.replace('￥', '')} 元`
}

function getStatusText(status: string) {
  const statusMap: Record<string, { text: string, color: string }> = {
    pending: { text: '待审批', color: '#ff9500' },
    approved: { text: '已通过', color: '#52c41a' },
    rejected: { text: '已拒绝', color: '#ff4d4f' },
  }
  return statusMap[status] || { text: status, color: '#666666' }
}
</script>

<template>
  <view class="page">
    <view class="demo-container">
      <view class="demo-title">
        DetailCard 插槽功能演示
      </view>

      <!-- 使用插槽的DetailCard组件 -->
      <DetailCard
        title="审批详情"
        :info-list="infoList"
      >
        <!-- 自定义金额显示插槽 -->
        <template #amountSlot="{ value }">
          <view class="custom-amount">
            <text class="amount-symbol">￥</text>
            <text class="amount-value">{{ formatAmount(value) }}</text>
          </view>
        </template>

        <!-- 自定义状态显示插槽 -->
        <template #statusSlot="{ value }">
          <view class="status-badge" :style="{ backgroundColor: getStatusText(value).color }">
            {{ getStatusText(value).text }}
          </view>
        </template>

        <!-- 自定义备注显示插槽 -->
        <template #remarkSlot="{ value, item }">
          <view class="custom-remark">
            <view class="remark-icon">
              📝
            </view>
            <view class="remark-content">
              <text class="remark-text">{{ value }}</text>
              <text v-if="item.forceMultiline" class="remark-note">（已强制多行显示）</text>
            </view>
          </view>
        </template>
      </DetailCard>

      <!-- 说明文档 -->
      <view class="doc-section">
        <view class="doc-title">
          使用说明
        </view>
        <view class="doc-content">
          <text class="doc-text">1. 在 infoList 中为字段添加 slot 属性指定插槽名称</text>
          <text class="doc-text">2. 使用对应的 template #插槽名 自定义显示内容</text>
          <text class="doc-text">3. 插槽可以访问 item、index、value 等参数</text>
          <text class="doc-text">4. 保持原有 forceMultiline 等功能特性</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.demo-container {
  max-width: 750rpx;
  margin: 0 auto;
}

.demo-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
}

/* 自定义金额样式 */
.custom-amount {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.amount-symbol {
  font-size: 24rpx;
  color: #ff6b35;
  font-weight: 500;
}

.amount-value {
  font-size: 32rpx;
  color: #ff6b35;
  font-weight: 600;
}

/* 自定义状态样式 */
.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  color: white;
  font-size: 24rpx;
  font-weight: 500;
  text-align: center;
  min-width: 80rpx;
}

/* 自定义备注样式 */
.custom-remark {
  display: flex;
  gap: 16rpx;
  align-items: flex-start;
}

.remark-icon {
  font-size: 32rpx;
  flex-shrink: 0;
}

.remark-content {
  flex: 1;
}

.remark-text {
  display: block;
  line-height: 1.6;
  color: #333;
  margin-bottom: 8rpx;
}

.remark-note {
  font-size: 22rpx;
  color: #999;
  font-style: italic;
}

/* 说明文档样式 */
.doc-section {
  background-color: white;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-top: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.doc-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}

.doc-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.doc-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}
</style>
